<template>
  <section class="chart-container">
    <div class="c_header systemManage">
      <div class="content">
        <div class="main-content">
          <div>
            <div class="cont">
              <div class="btn-group">
                <el-button size="mini" type="primary" @click="addNewRole">添加新角色</el-button>
              </div>
              <table width="100%" style="background:#fff">
                <thead>
                  <tr>
                    <th>序号</th>
                    <th>名字</th>
                    <th>权限数</th>
                    <th>员工数</th>
                    <th width="320px">操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in roleList" :key="item.id">
                    <td>{{index+1}}</td>
                    <td>{{item.hash.rname}}</td>
                    <td>{{item.hash.countf}}</td>
                    <td>{{item.hash.countp}}</td>
                    <td>
                      <span @click="modifyRoleInfoClick(item.hash.rid)">角色修改</span>
                      <span @click.stop="deleteRoleItem(item.hash.rid)">删除</span>
                    </td>
                  </tr>
                  <tr>
                    <td v-if="roleList.length==0" colspan="4">暂无数据</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <el-dialog title="角色管理" :visible.sync="dialogTableVisible5">
              <div class="addInfo">
                <div class="title">新增角色</div>
                <table width="95%">
                  <tbody>
                    <tr>
                      <td width="20%">角色名称:</td>
                      <td><input type="text" v-model="newRoleName"></td>
                    </tr>
                    <tr>
                      <td :rowspan="rolePermissionList.length+2">权限管理:</td>
                      <zTree v-if="isRouterAlive" :list.sync="ztreeDataSource" :func="nodeClick" :isOpen="true"
                        :isCheck="true"
                      ></zTree>
                    <tr>
                    <!-- <tr>
                      <td :rowspan="rolePermissionList.length+2">查询权限:</td>
                      <label v-for="(item,index) in jigouList" :key="index" class="labelbox" :style="{paddingLeft:item.hash.orgname.split(';').length*10+'px'}">
                        <input type="checkbox" :value="item.hash.orgid" v-model="checkedValue"/>{{(item.hash.orgname).replace(/;/g, "")}}
                      </label>
                    <tr> -->
                    <tr>
                      <td colspan="2" v-show="showAddRoleBtn" @click="addRole"><span>提交</span></td>

                    </tr>
                  </tbody>
                </table>
              </div>
            </el-dialog>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
import zTree from '~/components/common/zTree.vue';

export default {
  data() {
    return {
      dialogTableVisible5: false,
      dialogTableVisible6: false,
      sideMenu: [],
      isRouterAlive: true,
      RoleRids: [],
      change: '用户列表',
      showTitle: '',
      checkedValue: [],
      ts: this.newStore(),
      jigouList: [],
      // 角色管理相关
      roleList: [], // 角色列表
      rolePermissionList: [], // 角色权限列表
      permissionList: [], // 添加权限时绑定选择的权限数组
      onePermissInfo: [], // 一条角色信息
      showRoles: true, // 展示角色列表页
      showAddNewRole: false, // 展示增加角色页
      newRoleName: '', // 新角色名称
      nowRoleRid: '', // 点击角色权限修改时保存当前的rid
      showAddRoleBtn: false, // 添加角色时显示提交按钮
      showModifyRoleBtn: false, // 修改角色

      ztreeDataSource: [],
      dataList: [],
      treeDeepCopy: [],
      parentNodeModel: [], // 当前点击节点父亲对象
      nodeModel: null, // 当前点击节点对象
      result: [],
      Promiseall: [],
    };
  },
  created() {
    this.getRoleList();
    // this.getjigouList();
  },

  methods: {
    getTreea(rid) {
      return new Promise((resolve, reject) => {
        const req = {
          handle: '67A5B6FEF17D97DECF116BDF95B95C0B639EC0CBABE57827',
          token: localStorage.getItem('token'),
          rid,
        };
        this.spost(this.ts, '/mainservlet', req).then((ts) => {
          this.data = ts.d.data.operation1[0].hash.privstr;
          resolve(this.data);
        });
      });
    },
    nodeClick(trees) {
      this.dataList = [];
      this.getResult(trees);
    },
    getResult(data) {
      for (let i = 0; i < data.length; i++) {
        if (data[i].ckbool) {
          this.dataList.push(data[i].id);
        }
        if (data[i].hasOwnProperty('children')) {
          this.getResult(data[i].children);
        }
      }
    },
    getSidemenu() {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B078C37EB4CBA2359',
        token: localStorage.getItem('token'),
        supid: '200300',
      };
      // this.spost(this.ts, '/mainservlet', req).then((ts) => {
      // this.sideMenu = ts.d.data.operation1;
      // });
    },
    reloadTree() {
      this.isRouterAlive = false;

      this.getTreea(this.nowRoleRid).then((t) => {
        this.ztreeDataSource = JSON.parse(t);
        // console.log(JSON.stringify(t));
        this.$nextTick(() => {
          this.isRouterAlive = true;
        });
      });
    },

    // 角色管理
    // 点击添加角色按钮
    addNewRole() {
      this.reloadTree();
      this.nowRoleRid = '';
      this.showAddRoleBtn = true;
      this.dialogTableVisible5 = true;
    },

    // 添加角色接口方法
    addRole() {
      if (this.newRoleName.length < 1) {
        alert('请输入角色名称！');
        return;
      }
      let res;
      if (this.nowRoleRid) {
        res = {
          handle: '67A5B6FEF17D97DE35647731BB93A79BC65B80675326A1A5',
          token: localStorage.getItem('token'),
          rid: this.nowRoleRid,
          rname: this.newRoleName,
          funcsubid: this.dataList,
          // orgid: this.checkedValue,
        };
      } else {
        res = {
          handle: '67A5B6FEF17D97DEC3C602ED709680FD3B0374EB2CB78F0B',
          token: localStorage.getItem('token'),
          rname: this.newRoleName,
          funcsubid: this.dataList,
          // orgid: this.checkedValue,
        };
      }

      this.spost(this.ts, '/mainservlet', res).then(() => {
        // alert('保存成功！');
        this.dataList = [];
        this.reloadTree();
        this.dialogTableVisible5 = false;
        this.getRoleList();
      });
    },
    // 点击修改角色按钮
    modifyRoleInfoClick(rid) {
      this.dataList = [];
      // this.checkedValue = [];
      const req = {
        handle: '67A5B6FEF17D97DE35647731BB93A79B8998619FA4F7E6A9',
        token: localStorage.getItem('token'),
        rid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.treesdata = ts.d.data.operation2;
        this.onePermissInfo = ts.d.data.operation1;
        console.log(ts.d.data.operation1);

        this.newRoleName = this.onePermissInfo[0].hash.rname;
        for (let i = 0; i < this.treesdata.length; i += 1) {
          this.dataList.push(this.treesdata[i].hash.funcid);
        }
        // for (let j = 0; j < ts.d.data.operation3.length; j += 1) {
        //   this.checkedValue.push(ts.d.data.operation3[j].hash.orgid);
        // }
      });
      this.nowRoleRid = rid;

      this.reloadTree();
      this.showAddRoleBtn = true;
      this.dialogTableVisible5 = true;
    },


    // 删除角色
    deleteRoleItem(rid) {
      this.$confirm('确认删除?', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const res = {
          handle: '67A5B6FEF17D97DEF1D0D23DA4270B6342F7DECF2A67833C',
          token: localStorage.getItem('token'),
          rid,
        };
        this.spost(this.ts, '/mainservlet', res).then(() => {
          this.$message({
            type: 'primary',
            message: '删除成功!',
          });
          this.getRoleList();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        });
      });
    },
    // 获取用户角色列表
    getRoleList() {
      const req = {
        handle: '67A5B6FEF17D97DE35647731BB93A79B410BC76858D429A5',
        limit: '100000',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.roleList = ts.d.data.operation1;
      });
    },
    getjigouList() {
      const req = {
        handle: '67A5B6FEF17D97DEE5FB3EC2509558B2CBB2E6C77A0F5848',
        token: localStorage.getItem('token'),
        pid: '1',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.jigouList = ts.d.data.operation2;
        // this.newUserJigou = (this.jigouList[0].hash.orgname).replace(/;/g, '');
      });
    },

  },
  components: {
    zTree,
  },

};
</script>

<style>

</style>
